<template>
    <div class="info-page">
        <el-card class="box-card" style="width: 500px">
            <template #header>
                <div class="card-header">
                    <span>个人信息</span>
                    <el-button @click="showEdit" type="primary"
                        >编辑信息</el-button
                    >
                </div>
            </template>
            <div>
                <div class="item">
                    <span class="key">个人姓名：</span>
                    <span>{{ myInfo.name }}</span>
                </div>
                <div class="item">
                    <span class="key">通行状态：</span>
                    <el-tag v-if="myInfo.status === 1" type="success"
                        >正常</el-tag
                    >
                    <el-tag v-if="myInfo.status === 2" type="danger"
                        >禁用</el-tag
                    >
                </div>
                <div class="item">
                    <span class="key">电话号码：</span>
                    <span>{{ myInfo.phone }}</span>
                </div>
                <div class="item">
                    <span class="key">性别：</span>
                    <span v-if="myInfo.sex">{{
                        myInfo.sex === 1 ? '男' : '女'
                    }}</span>
                </div>
                <div class="item">
                    <span class="key">地址：</span>
                    <span>{{ myInfo.address }}</span>
                </div>
                <!-- <div class="item">
                    <span class="key">通行次数：</span>
                    <span>{{ total }}次</span>
                </div> -->
                <div class="item">
                    <span class="key">个人头像：</span>
                    <img
                        v-if="myInfo.avatar_url"
                        :src="myInfo.avatar_url"
                        width="100"
                    />
                </div>
            </div>
        </el-card>
        <!-- 新增和编辑弹窗 -->
        <el-dialog v-model="dialogFormVisible" title="编辑个人信息" width="40%">
            <el-form
                :model="infoForm"
                :rules="rules"
                ref="infoFormRef"
                label-width="120px"
            >
                <el-form-item label="用户名" prop="name">
                    <el-input
                        style="width: 250px"
                        v-model="infoForm.name"
                        placeholder="请输入用户名"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        style="width: 200px"
                        v-model="infoForm.password"
                        show-password
                        placeholder="输入密码"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item label="确认密码" prop="apwd">
                    <el-input
                        style="width: 200px"
                        v-model="infoForm.apwd"
                        show-password
                        placeholder="输入密码"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input
                        style="width: 250px"
                        maxlength="11"
                        v-model="infoForm.phone"
                        placeholder="请输入手机号码"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item label="地址">
                    <el-input
                        style="width: 250px"
                        v-model="infoForm.address"
                        placeholder="请输入地址"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="infoForm.sex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                        >取消</el-button
                    >
                    <el-button type="primary" @click="handleConfirm">
                        保存
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getUserList, updateUser } from '@/api/user'
import { getAllFaceList } from '@/api/face'
const myInfo = ref({})
const total = ref(0)
const infoFormRef = ref(null)
const dialogFormVisible = ref(false)

let userInfo = window.localStorage.getItem('userInfo')
userInfo = JSON.parse(userInfo)
const infoForm = ref({
    name: '',
    phone: '',
    sex: 1,
    address: '',
    password: '',
    apwd: ''
})
const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('确认密码不能为空！'))
    } else if (value !== infoForm.value.password) {
        callback(new Error('两次密码输入不一致，请重新输入！'))
    } else {
        callback()
    }
}
const rules = {
    name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    apwd: [{ required: true, trigger: 'blur', validator: validatePass2 }]
}
const showEdit = () => {
    dialogFormVisible.value = true
}
const handleConfirm = () => {
    infoFormRef.value.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            const params = infoForm.value
            params.name = userInfo.name
            params.user_id = userInfo.user_id
            updateUser({
                name: infoForm.value.name,
                password: infoForm.value.password,
                id: myInfo.value.id,
                status: myInfo.value.status,
                user_id: myInfo.value.user_id,
                sex: infoForm.value.sex,
                phone: infoForm.value.phone,
                address: infoForm.value.address
            }).then((res) => {
                console.log(res.data)
                if (!res.code) {
                    dialogFormVisible.value = false
                    ElMessage.success('编辑成功！')
                    initData()
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
async function initData() {
    const data = await getUserList({ name: userInfo.name })
    const info = data.data.list[0]
    myInfo.value = {
        ...info
    }
    infoForm.value = {
        name: info.name,
        phone: info.phone || '',
        sex: info.sex || 1,
        address: info.address || '',
        password: info.account,
        apwd: info.account
    }
    window.localStorage.setItem('userInfo', JSON.stringify(info))
}
onMounted(async () => {
    initData()
    // console.log(data.data.list[0])
    const res = await getAllFaceList({
        page: 1,
        size: 20,
        user_id: userInfo.user_id
    })
    total.value = res.data.total
    console.log(res)
})
</script>

<style scoped>
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.item .key {
    margin-right: 10px;
    width: 80px;
}
</style>
